<script setup lang="ts">

import NavigationBar from "@/components/navigationBar.vue";
import {getInfo} from "@/api/home/login/login";
import {ElMessage} from "element-plus";
import router from "@/router";
import PersonalSubstance from "@/views/personal/personalSubstance.vue";
import {ref} from "vue";

const errorHandler = () => true

let user = ref({})
let url = 'http://192.168.5.120:8090'
const gender = {
    man: '男',
    manImg: '../../src/assets/images/男.png',
    woman: '女',
    womanImg: '../../src/assets/images/女.png',
}
let birthDate
let years
getInfo().then(res=>{
    if (res.code == 401) {
        ElMessage.error('登录认证过期，请重新登录！')
        router.push({path: `/login`})
    }
    if (res.code == 200) {
        localStorage.setItem('studentId',res.data.id)
        localStorage.setItem('userInformation',JSON.stringify(res.data))
        user.value = JSON.parse(localStorage.getItem('userInformation'))
        console.log(user.value)
        birthDate = new Date(user.value.birthday)
        // 今天的日期
        const today = new Date();
        // 计算两个日期之间的毫秒数差
        const diffInMilliseconds = today - birthDate;
        // 将毫秒数转换为年
        years = Math.floor(diffInMilliseconds / (1000 * 60 * 60 * 24 * 365.25)); // 除以一年的毫秒数（考虑闰年
    }
})

</script>

<template>
  <!--个人中心页面-->
    <div>
        <div class="box">
            <div class="homePage">
                <!--              头部、背景、标题-->
                <div class="titlText">
                    <h3>个人中心</h3>
                </div>
                <div class="avatar" @click="router.push({path: '/personalName'})">
                    <!--                  头像、名字、性别年龄-->
                    <el-avatar :size="60" @error="errorHandler">
                        <img
                                :src="url + user.avatar" alt=""
                        />
                    </el-avatar>
                    <div class="nameAndage">
                        <div class="name">
                            {{user.nickname}}
                        </div>
                        <div class="age">
                            <img :src="user.gender == '男' ? gender.manImg : gender.womanImg " alt="" class="ageImg">
                            {{years}}
                        </div>
                    </div>
                </div>
                <div class="substance">
                    <personal-substance class="personal"></personal-substance>
                </div>
            </div>
            <div class="navigationBar">
                <navigation-bar></navigation-bar>
            </div>
        </div>
    </div>
</template>

<style scoped>

.box {
    padding: 1% 0;
    width: 100%;
    height: 56vw;
    box-sizing: border-box;
    background: linear-gradient(rgba(40,140,234,0.9), rgba(40,140,234, 0.9)), url("../assets/images/背景图.jpg");
    .titlText {
        padding: 0 1%;
        color: #fff;
        * {
            margin: 0;
            padding: 0;
        }
    }
    .substance {
        width: 100%;
        background-color: #F2F9FF;
        border-radius: 15px;
        .personal {
            width: 100%;
            height: 100%;
        }
    }
}
.homePage {
    margin: auto;
    padding: 5% 2%;
    width: 95%;
    height: 100%;
    .avatar {
        display: flex;
        margin-top: 6%;
        padding: 0 5%;
        .nameAndage {
            padding-left: 3%;
            font-size: 5vw;
            color: #fff;
        }
        .name {
            width: 100%;
            font-weight: 600;
            /* 强制在同一行显示 */
            white-space: nowrap;
            /* 溢出隐藏 */
            overflow: hidden;
            /* 添加省略号 */
            text-overflow: ellipsis;
        }
        .age {
            margin-top: 10%;
            background-color: rgba(24,45,65,0.3);
            border-radius: 15px;
            font-size: 4vw;
            width: 80%;
            height: 45%;
            padding: 5%;
            text-align: center;
            .ageImg {
                width: 30%;
                vertical-align: bottom;
            }
        }
    }
}


.navigationBar {
    position: fixed;
    padding: 3% 0;
    width: 100%;
    min-height: 6%;
    background-color: #fff;
    bottom: 0;
    border: 1px solid rgba(42, 43, 65, 0.2);
}
</style>